.form-item {
  // background-color: pink;
}

page {
  background-color: #ffffff;
}

.ui {
  // 标签
  &-tag {
    padding: 2rpx 10rpx;
    font-size: 20rpx;
    font-weight: 500;
    line-height: 32rpx;
    color: #1951fa;
    background-color: #e8eefe;
    border-radius: 4rpx;
    flex-shrink: 0;

    &.tag {
      &-style--orange {
        color: #ff630b;
        background-color: #ffefe7;
      }

      &-style--yellow {
        color: $text-l1-color;
        background-color: #ffeb66;
      }
    }
  }

  // 按钮
  &-button {
    padding: 12rpx 24rpx;
    border-radius: 4rpx;
    font-size: 26rpx;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(---, $text-l1-color);
    background-color: #fff;
    border: 2rpx solid transparent;

    &.button {
      // 大小
      &-size {
        &--small {
          height: 44rpx;
          padding: 0 15rpx;
          border-radius: $border-radius;
        }
        &--middle {
          height: 60rpx;
          padding: 0 15rpx;
          border-radius: $border-radius;
        }

        &--middle-2 {
          height: 72rpx;
          padding: 0 15rpx;
          border-radius: $border-radius--md;
        }

        &--large {
          height: 80rpx;
          padding: 0 15rpx;
          border-radius: 8rpx;
        }
      }
      // 样式
      &-style {
        &--primary {
          background: var(--, $theme-color);
          color: var(--, #fff);
        }

        // 没背景，文字颜色黑色
        &--default {
          color: var(---, $text-l1-color);
          font-size: 30rpx;
          line-height: 40rpx;
          font-style: normal;
          background-color: #fff;
          border: 2rpx solid $border-color;
          background-color: $bg-color;
        }

        &--text {
          color: $primary-color;
        }

        &--plain {
          // border: 2rpx solid var(---, $primary-color);
          background-color: #e8eefe;
          // color: $primary-color;
        }
      }
      // 功能
      &-function {
        // 激活高亮
        &--active {
          color: $primary-color;
          border: 2rpx solid $primary-color;
        }

        &--disabled {
          background-color: $disabled-color;
        }

        &--delete {
          background-color: $failed-color;
          color: #fff;
        }
      }

      &--primary {
        background: var(--, $theme-color);
        color: var(--, #fff);
      }

      &--default {
        color: var(---, $text-l1-color);

        font-size: 30rpx;
        font-style: normal;
        line-height: 40rpx;
        border-radius: $border-radius;
        border: 2rpx solid $border-color;
        background-color: $bg-color;
      }

      &--text {
        background: var(--, #fff);
        color: $primary-color;
      }

      &--plain {
        border: 2px solid var(---, $primary-color);
        background-color: #e8eefe;
        color: $primary-color;
      }
    }
  }

  // 线
  &-line {
    width: 100%;
    height: 2rpx;
    background-color: $border-color;
  }

  // 输入框
  &-input {
    // display: flex;
    line-height: 88rpx;
    height: 88rpx;
    box-sizing: border-box;
    background-color: $bg-color;

    &::placeholder {
      color: $text-l4-color;
    }
  }
  
  // 必填
  &-required {
    
    &:after {
      content: "*";
      display: inline-block;
      margin-left: 2rpx;
      font-size: 24rpx;
      font-weight: 500;
      line-height: 32rpx;
      color: $failed-color;
    }
  }

}

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
